import React, { useState } from 'react'
import { Button, Modal, Form, Input } from 'antd';
import { randomStr } from 'common/utils.ts'
export default function Add(props) {
    const { onAdd = () => { } } = props
    const [isAdd, setIsAdd] = useState(false)
    const [form] = Form.useForm();

    const onCancal = () => {
        form.resetFields()
        setIsAdd(false)
    }

    const onFinish = ({ name }) => {
        onCancal()
        onAdd({ content: name, status: 0, id: randomStr() })
    }; 

    const onFinishFailed = (errorInfo) => console.log('Failed:', errorInfo);

    return (
        <div>
            <Button type="primary" shape="small" onClick={() => setIsAdd(true)}>添加</Button>
            <Modal okText='确定' cancelText='取消' title="添加书签" visible={isAdd} onOk={() => form.submit()} onCancel={onCancal}>
                <Form
                    form={form}
                    name="basic"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="书签名称"
                        name="name"
                        rules={[{ required: true, message: '请填写书签名称!' }]}
                    >
                        <Input />
                    </Form.Item>
                    {/* <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">提交</Button>
                    </Form.Item> */}
                </Form>
            </Modal>
        </div>
    )
}
